<template>
    <div class="home">
      <el-row>
        <el-col :span="12"><div class="grid-content bg-purple">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="item in carousel" :key="item">
              <img :src="yuming+item" class="img_">
            </el-carousel-item>
          </el-carousel>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple-light">
          <el-form :label-position="labelPosition" label-width="128px" >
            <el-form-item label="商品名称:">
              <span class="user_text">{{Releasegoodsinfo.goods_name}}</span>
            </el-form-item>
            <el-form-item label="商品库存:">
              <span class="user_text">{{Releasegoodsinfo.stock}}</span>
            </el-form-item>
            <el-form-item label="商品排序:">
              <span class="user_text">{{Releasegoodsinfo.sort}}</span>
            </el-form-item>
          </el-form>
        </div></el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
          <el-form :label-position="labelPosition" label-width="128px" >
            <el-form-item label="商品价格:">
              <span class="user_text">{{Releasegoodsinfo.price}}</span>
            </el-form-item>
            <el-form-item label="商品编号:">
              <span class="user_text">{{Releasegoodsinfo.number}}</span>
            </el-form-item>
            <el-form-item label="商品销量:">
              <span class="user_text">{{Releasegoodsinfo.sales_volume}}</span>
            </el-form-item>
          </el-form>
        </div></el-col>
      </el-row>

      <el-tabs v-model="activeName2" type="card" class="jian_jie">
        <el-tab-pane label="商品参数" name="first">
          <div v-html="Releasegoodsinfo.parameter" class="goods_info"></div>
        </el-tab-pane>
        <el-tab-pane label="商品介绍" name="second">
          <div v-html="Releasegoodsinfo.introduce" class="goods_info"></div>
        </el-tab-pane>
      </el-tabs>
    </div>
</template>
<script>
  import {
    mapGetters
  } from 'vuex'
    export default {
        components: {},
        data(){
            return {
              labelPosition: 'right',
              activeName2: 'first',
              carousel:{},
              yuming: this.$IMG,
//              prosheng:prosheng,
            }
        },
        methods: {
//          editUserChilde
        },
        watch: {},
        computed: {
          ...mapGetters([
            'Releasegoodsinfo',
          ]),
        },
        mounted(){
            this.carousel = JSON.parse(this.Releasegoodsinfo.carousel);
//            console.log(this.prosheng);
            //生命周期
        }
    }
</script>
<style scoped>
    .home {
        width: 100%;
        height: 100%;
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 18px;
      opacity: 0.75;
      line-height: 300px;
      margin: 0;
    }
    .img_{
      display: block;
      width: 100%;
      height:100%
    }
.goods_info{
  width: 80%;
  margin: auto;
}
.jian_jie{
  /*width:70%;*/
  /*float: right;*/
  /*height:100%;*/
}

    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
    .el-row {
      margin-bottom: 20px;
    &:last-child {
       margin-bottom: 0;
     }
    }
    .el-col {
      border-radius: 4px;
    }
    .bg-purple-dark {
      background: #99a9bf;
    }
    .bg-purple {
      /*background: #d3dce6;*/
    }
    .bg-purple-light {
      /*background: #e5e9f2;*/
    }
    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }
    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
</style>
